<template>
	<div style="overflow-x: hidden;">
		<div class="download-app" v-if="shareShow">
			<a href="http://vend.1234tv.com/app/download" class="download-app-a">下载 App</a>
		</div>
		<div v-if="vdetail.uid">
			<div class="pictxt" v-if="vdetail.status == 0">	
				<video-player :style="{height:vheight+'px'}" class="video-player-box" v-if="vdetail.type=='2'"
			       ref="videoPlayer"
			       :options="playerOptions"
			       :playsinline="true"
			       customEventName="customstatechangedeventname"
			       @play="onPlayerPlay($event)"
			       @pause="onPlayerPause($event)"
			       @ended="onPlayerEnded($event)"
			       @statechanged="playerStateChanged($event)"
			       @loadeddata="onPlayerLoadeddata($event)"  
			       @timeupdate="onPlayerTimeupdate($event)"     
			       @ready="playerReadied">
			    </video-player>
			    <div class="title">{{vdetail.title}}</div>
			    <div class="teacher">
					<div class="pic"><img @click="teachershow = !teachershow" :src="vdetail.avatar" />
						<div class="teacherdes" v-if="teachershow"><i class="arrow-up"></i>{{vdetail.intro}}</div>
					</div>
					<div class="des">
						<h4>{{vdetail.username}}</h4>
						<p>{{vdetail.publish}}</p>
						<div class="follow-wrap" @click="follow" v-if="!followed">
							<a href="javascript:;" class="follow-wrap-a" >+ 关注</a>
						</div>
						<div class="follow-wrap" @click="cancelFollow" v-else>
							<a href="javascript:;" class="follow-wrap-a">取消关注</a>
						</div>
					</div>
				</div>
				<div class="parm detail-container" v-html="vdetail.content" ></div>
				<div class="biaoqian" v-if="vdetail.tag !=''">
					<span v-for="(tp,index) in vdetail.tag.split(';')">{{tp}}</span>
				</div>
			</div>
			<div class="frozen" v-else>
				<i></i>
				<p>该文章已经被禁止浏览</p>
			</div>
	
			<div class="recommend">
				<div class="cdtitle" v-if="vdetail.status == 0">推荐</div>
				<div class="cdtitle2" v-else>给你推荐了其他内容</div>
				<p v-if="recommend.length ==0" class="nocomment">暂无推荐</p>
				<ul>
					<li v-for="item in recommend"  v-if="item.uid !=vdetail.uid">
						<a :href="'/'+item.uid+recommandHref">
							<img class="pic" v-lazy="item.cover" alt="推荐">
							<div class="des">
								<h4>{{item.title}}</h4>
								<p class="time"><span v-if="item.type==1"><i></i>图文</span><span v-else><i class="i1"></i>视频</span>{{item.publish}}</p>
								<div class="biaoqian">
									<span v-for="(tp,index) in item.tag.split(';')">{{tp}}</span>
								</div>
							</div>
						</a>
					</li>
				</ul>
			</div>
	
			<div class="comment" v-if="vdetail.status == 0">
				<div class="title">评论</div>
				<p v-if="commentAll.length ==0" class="nocomment">暂无评论</p>
				<ul v-else>
					<li v-for="item in commentAll" :key="item.id">
						<img class="img" :src="item.author.avatar" />
						<div class="des">
							<h4>{{item.author.nickname}}</h4>
							<p class="time">{{item.created_at}}</p>
							<div class="pram">
								<p v-html="item.content"></p>
								<div class="retxt" v-if="item.comments.length">
									<span>{{item.comments[0].author.name}}:</span> {{item.comments[0].content}}
								</div>
							</div>
						</div>
					</li>
				</ul>
			</div>
			<div class="face-bg" v-show="bgShow" @click="emojiShow" v-if="vdetail.status == 0"></div>
			<div class="message" v-if="vdetail.status == 0">
				<div class="faceDiv" v-show="showFace">
					<span v-for="(item,index) in imgList" @click="choice_face(index,$event)">
						<img :src="item" :alt="faceAlt[index]" />
					</span>
				</div>
				<div class="inner">
					<span class="btn" @click="send($event)" :class="{'disbtn':vdetail.allow_comment==0}">发送</span>
					<div class="txtarea">
						<span v-if="vdetail.allow_comment==1" class="face" @click="make_face"></span>
						<input name="content-input" rows="" cols="" class="content-textarea" v-model="content"/>
						<!--<p :contenteditable="vdetail.allow_comment==0 ? false :'plaintext-only'" id="p_input" @paste="cgText($event)"></p>-->
						<div v-if="vdetail.allow_comment==0" class="pstxt">文章设置为禁止评论</div>
					</div>
					<div class="zan" :class="vdetail.liked==1 ? cname :''"><i @click="zan($event)" class="icon-zan"></i></div>
					<div class="collect-wrap" :class="{'has-collect':iscollect}">
						<i class="icon-collect" @click="collect"></i>
					</div>
				</div>
			</div>
			<!--<div class="share"  v-if="vdetail.status == 0 && shareShow" @click="shareflag = true"></div>
			<div class="sharebg" @click="shareflag = false" v-if="shareflag"><i></i></div>-->
		</div>
	</div>
</template>
<script>
import {static_url} from '../utils/const';
import {faceContent,customLazyLoad} from '../utils/util';
import wx from 'weixin-js-sdk';
import global from '../pages/global'
import Axios from 'axios'
import mediumZoom from 'medium-zoom'
import def_lazy_img from '../assets/images/lazy_load.png'
export default {
	data(){
		return {
			d_global:global,
			teachershow:false,
			shareflag:false,
			vheight:$(window).width()*9/16,
			vdetail:{},
			cname:'s2',
			userinfo:{},
			videoClickCount:0,
			commentAll:[],
			recommend:[],
			playerOptions: {
	          muted: false,
	          language: 'zh-CN',
	          playbackRates: [0.7, 1.0, 1.5, 2.0],
	          sources: [{
	            type: "video/mp4",
	            src:'http://www.w3school.com.cn/i/movie.ogg'
	          }],
	          poster: '',
	          notSupportedMessage:'此视频暂无法播放，请稍后再试'
	    },
	    content:'',
	    iscollect:0,
	    followed:0,
	    user_id:"",
	    imgList:[],
	    bgShow:false,
	    showFace:false,
	    shareShow:true,
	    recommandHref:'',
	    userId:''
		}
	},
	created(){
		if(this.GetQueryString('deviceType')){
			this.shareShow = false;
			this.recommandHref += '?deviceType='+this.GetQueryString('deviceType')+"&utoken="+this.GetQueryString('utoken');
		}
		this.faceAlt = ["[微笑]", "[撇嘴]", "[色]", "[发呆]", "[得意]", "[流泪]", "[害羞]", "[闭嘴]", "[睡]", "[大哭]", "[尴尬]", "[发怒]", "[调皮]", "[呲牙]", "[惊讶]", "[难过]", "[酷]", "[冷汗]", "[抓狂]", "[吐]", "[偷笑]", "[可爱]", "[白眼]", "[傲慢]", "[饥饿]", "[困]", "[惊恐]", "[流汗]", "[憨笑]", "[大兵]", "[奋斗]", "[咒骂]", "[疑问]", "[嘘]", "[晕]", "[折磨]", "[衰]", "[骷髅]", "[敲打]", "[再见]", "[擦汗]", "[抠鼻]", "[鼓掌]", "[糗大了]", "[坏笑]", "[左哼哼]", "[右哼哼]", "[哈欠]", "[鄙视]", "[委屈]", "[快哭了]", "[阴险]", "[亲亲]", "[吓]", "[可怜]", "[菜刀]", "[西瓜]", "[啤酒]", "[篮球]", "[乒乓]", "[咖啡]", "[饭]", "[猪头]", "[玫瑰]", "[凋谢]", "[示爱]", "[爱心]", "[心碎]", "[蛋糕]", "[闪电]", "[炸弹]", "[刀]", "[握手]", "[胜利]", "[便便]", "[NO]", "[OK]", "[抱拳]", "[弱]", "[强]"];
	},
	beforeRouteUpdate(to,form,next){
		next();
		location.reload();
	},
	methods:{
		resize(){
			window.onresize = function(){
				if($('.video-player-box video')){
				  $('.video-player-box video')[0].style.width = window.innerWidth + "px";
				  $('.video-player-box video')[0].style.height = window.innerHeight + "px";
				}
			}
		},
		playerReadied(player) {
         //console.log('the player is readied', player);
        },
        onPlayerLoadeddata(player){
			//console.log('onPlayerLoadeddata', player);
        },
        onPlayerTimeupdate(player){  
          console.log(Math.floor(player.currentTime()));
          if(this.videoClickCount==0){
          	 var  currentTime = Math.floor(player.currentTime());
          	 if(currentTime != 0 && currentTime%10 ==0){ //隔10秒发送一次统计
          	 	var per = Math.round( Math.floor(player.currentTime()) / Math.floor(player.duration()) *100 );
          	 	console.log('播放中'+per);
          	 	window.statistic_log("percentage="+per);
          	 }
          }
        },
		onPlayerPlay(player) {
         console.log('player play!')
         window.statistic_log("played=true");
	    },
	    onPlayerPause(player) {
	       console.log('player pause!')
	    },
	    onPlayerEnded(player) {
	    	if(this.videoClickCount==0){
	    		//var per = Math.floor(player.currentTime()) / Math.floor(player.duration()) *100;
	    		window.statistic_log("percentage="+100);
	    		this.videoClickCount++;
	    	}
	    },
	    playerStateChanged(playerCurrentState) {
           console.log('player current update state', playerCurrentState)
        },
		cgText(e){
			e.preventDefault();
	        var text = null;
	    
	        if(window.clipboardData && clipboardData.setData) {
	            // IE
	            text = window.clipboardData.getData('text');
	        } else {
	            text = (e.originalEvent || e).clipboardData.getData('text/plain') || prompt('在这里输入文本');
	        }
	        if (document.body.createTextRange) {    
	            if (document.selection) {
	                textRange = document.selection.createRange();
	            } else if (window.getSelection) {
	                sel = window.getSelection();
	                var range = sel.getRangeAt(0);
	                
	                // 创建临时元素，使得TextRange可以移动到正确的位置
	                var tempEl = document.createElement("span");
	                tempEl.innerHTML = "&#FEFF;";
	                range.deleteContents();
	                range.insertNode(tempEl);
	                textRange = document.body.createTextRange();
	                textRange.moveToElementText(tempEl);
	                tempEl.parentNode.removeChild(tempEl);
	            }
	            textRange.text = text;
	            textRange.collapse(false);
	            textRange.select();
	        } else {
	            // Chrome之类浏览器
	            document.execCommand("insertText", false, text);
	        }
		},
		getDetail(){
			this.http.get('./post/'+this.$route.params.uuid+'?'+Math.random())
			  .then((res)=> {
			    if(res.data.error == 0){
					this.vdetail = res.data.data;
					this.vdetail.content = this.vdetail.content.replace(/<img.*?(?:>|\/>)/gi,function(img){
						var src = img.match(/src=[\'\"]?([^\'\"]*)[\'\"]?/ig);
						if(src){
							return '<img class="lazy" src="'+def_lazy_img+'" data-src="'+src[0].split('"')[1]+'"/>';
						}else{
							return ''
						}
					})
					if(res.data.data.avatar.indexOf('http:')==-1){
						this.vdetail.avatar = static_url+res.data.data.avatar;
					}else{
						this.vdetail.avatar = res.data.data.avatar;
					}
					if(res.data.data.video.indexOf('http:')==-1){
						this.playerOptions.sources[0].src = static_url+res.data.data.video;
					}else{
						this.playerOptions.sources[0].src = res.data.data.video;
					}
					if(res.data.data.cover.indexOf('http:')==-1){
						this.playerOptions.poster = static_url+res.data.data.cover;
					}else{
						this.playerOptions.poster = res.data.data.cover;
					}
					if(this.vdetail.status == 0){
						document.title = res.data.data.title;
					}else{
						document.title = '该文章已经被禁止浏览';
					}
					$("[name='keywords']").attr("content","文章标题，文章作者， 微观财经，投资者教育，微观，财经新闻，股票，期货，基金，债券，外汇，信托，理财，财经频道，财经网站，财经资讯，财经自媒体");
					$("[name='description']").attr("content",this.vdetail.desc);
					this.iscollect = res.data.data.favorite;
					this.followed = res.data.data.followed;
					this.user_id = res.data.data.user_id;
					this.getRecommend(res.data.data.user_id);
					this.$nextTick(function(){
						customLazyLoad('.detail-container img')
				    mediumZoom('.detail-container img',{
				    	background: 'rgba(0,0,0,.9)',
				    });
					})
				}else{
					layer.open({
					    content: res.data.msg
					    ,skin: 'msg'
					    ,time: 5 //2秒后自动关闭
					});
				}
			  })
			  .catch((error)=>{
		    });
		},
		getRecommend(user_id){
			var del_div = layer.open({type: 2,shadeClose:false});
			this.http.get('./post/relate/'+this.$route.params.uuid)
			  .then((res)=> {
			  	layer.close(del_div);
			    if(res.data.error == 0){
					this.recommend = res.data.data;
					this.recommend.forEach((item,index)=>{
						if(item.cover.indexOf("http") === -1){
							item.cover = static_url + item.cover;
						}
					});
				}else{
					layer.open({
					    content: res.data.msg
					    ,skin: 'msg'
					    ,time: 2 //2秒后自动关闭
					});
				}
			  })
			  .catch((error)=>{
			  	 
		    });
		},
		getComment(){
			this.http.get('./post/'+this.$route.params.uuid+'/comments')
			  .then((res)=> {
			    if(res.data.error == 0){
					this.commentAll = res.data.data;
					this.commentAll.forEach((item,index)=>{
						if(item.author.avatar.indexOf("http") === -1){
              item.author.avatar = static_url + "/" +item.author.avatar;
            }
					  item.content = faceContent(item.content);
            item.content = item.content.replace(/</g,'&#60;').replace(/>/g,'&#62;').replace(/\//g,'&#47;');
						item.content = item.content.replace(/&#47;b(\d+)/g,function(all,$1){
							let src = require(`../assets/face/${$1}.png`);
							return "<img width='20' height='20' src='"+src+"'>";
						});	
		        item.comments.forEach((item, index) => {
		          if (item.author.avatar.indexOf("http") === -1) {
		            item.author.avatar = static_url + item.author.avatar;
		          }
		        })
					});
					
				}else{
					layer.open({
					    content: res.data.msg
					    ,skin: 'msg'
					    ,time: 2 //2秒后自动关闭
					});
				}
			  })
			  .catch((error)=>{
			  	 
		      });
		},
		make_face(){
			this.showFace = !this.showFace;
			this.bgShow = !this.bgShow;
			if(this.showFace){
				let imgList = [];
				for (let i = 1; i <=79; i++) {
				    imgList.push(require('../assets/face/'+i+'.png'))
				}
				this.imgList = imgList;
			}
		},
		choice_face:function(index){
			this.content = this.content + this.faceAlt[index];
	    },
	    follow(){
	    	if(this.follwed){
	    		layer.open({
				    content: '已经关注过咯'
				    ,skin: 'msg'
				    ,time: 2 //2秒后自动关闭
				});
	    	}else{
		    	if(this.GetQueryString('deviceType')){
		    		if(!this.GetQueryString('utoken')){
		    			location.href = "wg://v.1234tv.com?action=login";
		    		}
		    	}else{
	    			if(!this.d_global.is_weixin){
		    			layer.open({
						    content: '请在微信中打开页面'
						    ,skin: 'msg'
						    ,time: 2 //2秒后自动关闭
						});	
						return false;
		    		}
	    		}

		    	this.http.post('follow/' + this.user_id)
				  .then((res)=> {
				    if(res.data.error == 0){
				    	this.followed = 1;
				    	layer.open({
						    content: '关注成功！'
						    ,skin: 'msg'
						    ,time: 2 //2秒后自动关闭
						});
					}else{
						if(res.data.error == 50){
							if(this.GetQueryString('deviceType')){
								location.href = "wg://v.1234tv.com?action=login";
							}
						}else{
							layer.open({
							    content:  res.data.msg
							    ,skin: 'msg'
							    ,time: 2 //2秒后自动关闭
							});
						}
					}
				  })
				  .catch((error)=>{
				  	 
			      });
		    }
	    },
	    cancelFollow(){
	    	if(this.GetQueryString('deviceType')){
	    		if(!this.GetQueryString('utoken')){
	    			location.href = "wg://v.1234tv.com?action=login";
	    		}
	    	}else{
    			if(!this.d_global.is_weixin){
	    			layer.open({
					    content: '请在微信中打开页面'
					    ,skin: 'msg'
					    ,time: 2 //2秒后自动关闭
					});	
					return false;
	    		}
    		}
	    	this.http.post('follow/' + this.user_id,{_method:'DELETE'})
			  .then((res)=> {
			    if(res.data.error == 0){
			    	this.followed = 0;
			    	layer.open({
					    content: '取消关注咯！'
					    ,skin: 'msg'
					    ,time: 2 //2秒后自动关闭
					});
				}else{
					if(res.data.error == 50){
						if(this.GetQueryString('deviceType')){
							location.href = "wg://v.1234tv.com?action=login";
						}
					}else{
						layer.open({
						    content:  res.data.msg
						    ,skin: 'msg'
						    ,time: 2 //2秒后自动关闭
						});
					}
				}
			  })
			  .catch((error)=>{
			  	 
		     });
	    },
	    collect(){
	    	if(this.iscollect){
	    		layer.open({
				    content: '您已收藏过'
				    ,skin: 'msg'
				    ,time: 2 //2秒后自动关闭
				});
	    	}else{
		    	if(this.GetQueryString('deviceType')){
		    		if(!this.GetQueryString('utoken')){
		    			location.href = "wg://v.1234tv.com?action=login";
		    		}
		    	}else{
	    			if(!this.d_global.is_weixin){
		    			layer.open({
						    content: '请在微信中打开页面'
						    ,skin: 'msg'
						    ,time: 2 //2秒后自动关闭
						});	
						return false;
		    		}
	    		}
		    	this.http.post('./post/'+this.$route.params.uuid+'/favorite')
				  .then((res)=> {
				    if(res.data.error == 0){
				    	this.iscollect = 1;
				    	layer.open({
						    content: '收藏成功！'
						    ,skin: 'msg'
						    ,time: 2 //2秒后自动关闭
						});
					}else{
						if(res.data.error == 50){
							if(this.GetQueryString('deviceType')){
								location.href = "wg://v.1234tv.com?action=login";
							}
						}else{
							layer.open({
							    content:  res.data.msg
							    ,skin: 'msg'
							    ,time: 2 //2秒后自动关闭
							});
						}
					}
				  })
				  .catch((error)=>{
				  	 
			      });
		    }
	    },
	    zan:function(event){
	    	if($(event.target).parent().hasClass('s2')){
	    		layer.open({
				    content: '您已点赞过'
				    ,skin: 'msg'
				    ,time: 2 //2秒后自动关闭
				});
	    	}else{
		    	if(this.GetQueryString('deviceType')){
		    		if(!this.GetQueryString('utoken')){
		    			location.href = "wg://v.1234tv.com?action=login";
		    		}
		    	}else{
	    			if(!this.d_global.is_weixin){
		    			layer.open({
						    content: '请在微信中打开页面'
						    ,skin: 'msg'
						    ,time: 2 //2秒后自动关闭
						});	
						return false;
		    		}
	    		}
		    	this.http.post('./post/'+this.$route.params.uuid+'/like')
				  .then((res)=> {
				  	//layer.close(del_div);
				    if(res.data.error == 0){
				    	layer.open({
						    content: '点赞成功！'
						    ,skin: 'msg'
						    ,time: 2 //2秒后自动关闭
						});
				    	$(event.target).parent().addClass('s2');
				    	this.vdetail.like = res.data.likes;
					}else{
						if(res.data.error == 50){
							if(this.GetQueryString('deviceType')){
								location.href = "wg://v.1234tv.com?action=login";
							}
						}else{
							layer.open({
							    content:  res.data.msg
							    ,skin: 'msg'
							    ,time: 2 //2秒后自动关闭
							});
						}
					}
				  })
				  .catch((error)=>{
				  	 
			      });
		    }
	    },
	    getUserinfo:function(){
	    	this.http.get('./user/profile')
			  .then((res)=> {
			  	 console.log(res);
			     if(res.data.error == 0){
			     	this.userId = res.data.data.user_id;
			     	if(window.statistic_log){
			     		window.statistic_log("user_id="+res.data.data.user_id);	
			     	}
			     }else{
			     	
			     }
			  })
			  .catch((error)=>{
			  	 //alert(error);
		      });
	    },
	    user:function(){
	    	this.http.get('./wx/user')
			  .then((res)=> {
			     if(res.data.error == 0){
			     	this.getUserinfo()
			     	this.getDetail();
					this.getComment();
			     }else{
			     	location.href = "http://login.1234tv.com/v1/users/wxLogin?service="+location.href
			     }
			  })
			  .catch((error)=>{
			  	 //alert(error);
		      });
	    },
	    send:function(event){
	    	if(this.GetQueryString('deviceType')){
	    		if(!this.GetQueryString('utoken')){
	    			location.href = "wg://v.1234tv.com?action=login";
	    		}
	    	}else{
    			if(!this.d_global.is_weixin){
	    			layer.open({
					    content: '请在微信中打开页面'
					    ,skin: 'msg'
					    ,time: 2 //2秒后自动关闭
					});	
					return false;
	    		}
    		}
	        if($(event.target).hasClass('disbtn')){
	       	  layer.open({
			    content: '文章设置为禁止评论'
			    ,skin: 'msg'
			    ,time: 2 //2秒后自动关闭
			  });
			   return false;	
	        }
		    var text = this.content;
		    if(text.replace(/^\s+|\s+$/g,'') == ''){
		   	  layer.open({
			    content: '发送内容不能为空'
			    ,skin: 'msg'
			    ,time: 2 //2秒后自动关闭
			  });
			   return false;	
		    }
		   var re=/<img\b[^>]*>/g;
		   var reword = text.replace(re,'b');
		   if( reword.length > 250){
		   	  layer.open({
			    content: '发送内容不能超过250个字符'
			    ,skin: 'msg'
			    ,time: 2 //2秒后自动关闭
			  });
			   return false;	
		   }

		   var del_div = layer.open({type: 2});
		   var parma_arr = {};
	  	   parma_arr.content = text;
		   this.http.post('./post/'+this.$route.params.uuid+'/comment',parma_arr)
			  .then((res)=> {
			  	layer.close(del_div);
			    if(res.data.error == 0){
			    	this.getComment();
					this.content = '';
					this.showFace = false;
				}else{
					if(res.data.error == 50){
						if(this.GetQueryString('deviceType')){
							location.href = "wg://v.1234tv.com?action=login";
						}
					}else{
						layer.open({
						    content:  res.data.msg
						    ,skin: 'msg'
						    ,time: 2 //2秒后自动关闭
						});
					}
				}
			  })
			  .catch((error)=>{
			  	 
		      });
		},
		GetQueryString:function(name) {
		   var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i");
		   var r = window.location.search.substr(1).match(reg);
		   if (r!=null) return unescape(r[2]); return 0;
		},
		weixin_share:function(){
			var _this = this;
			var sharenum = _this.GetQueryString('share') == 0 ? '?share=2' :'?share='+ (parseInt(_this.GetQueryString('share'))+1);
			var parma_arr = {};
	  	    parma_arr.url = encodeURIComponent(location.href.split('#')[0]);
		    this.http.post('http://login.1234tv.com/v1/users/jsapi',parma_arr)
			  .then((res)=> {
			    share_config(res.data);
			})
			.catch((error)=>{
			  	
		    });
			function share_config(weixin){
				wx.config({
			        debug: false,
			        appId: weixin.appId, // 和获取Ticke的必须一样------必填，公众号的唯一标识
			        timestamp:weixin.timestamp, // 必填，生成签名的时间戳
			        nonceStr: weixin.nonceStr, // 必填，生成签名的随机串
			        signature: weixin.signature,// 必填，签名，见附录1
			          //需要分享的列表项:发送给朋友，分享到朋友圈，分享到QQ，分享到QQ空间
			        jsApiList: [
			           'onMenuShareAppMessage','onMenuShareTimeline'
			        ]
			    });
			    //处理验证失败的信息
		        wx.error(function (res) {
//		          alert('验证失败返回的信息:'+res.errorMsg);
		        });
		        //处理验证成功的信息
		        wx.ready(function () {
					var shareData = {};
					if(_this.vdetail.cover.indexOf("http:") === -1){
						shareData.imgUrl = static_url+_this.vdetail.cover;
					}else{
						shareData.imgUrl = _this.vdetail.cover;
					}
					shareData.link = window.location.href.split('?')[0]+sharenum;
					shareData.desc = $('.pictxt .parm').text();
					shareData.title =  _this.vdetail.title;
					shareData.success =function(){
						if(window.statistic_log){
			     			window.statistic_log("user_id="+_this.userId);	
			     		}
						layer.open({
						    content: '分享成功！'
						    ,skin: 'msg'
						    ,time: 2 //2秒后自动关闭
					   });
					};
					shareData.cancel = function () {

			        };

			        //分享到朋友圈
			        wx.onMenuShareTimeline(shareData);
			        //分享给朋友
			        wx.onMenuShareAppMessage(shareData);
			    });
			}
		},
		emojiShow(){
			this.showFace = false;
			this.bgShow = false;
		}
	},
	mounted:function(){
		this.resize();
		if(this.d_global.is_weixin && this.d_global.getCookie('UNION_TOKEN') != null){
			this.user();
			this.weixin_share();
		}else{
			this.getDetail();
			this.getComment();
		}	
	}
}
</script>

<style type="text/css">
	*{ padding: 0; margin: 0; }
	li{ list-style: none; }
	html,body,#app,#view { height: 100%; }/
	.follow-wrap-a{-webkit-tap-highlight-color:rgba(0,0,0,0) };
	.graybg { background: #f1f1f1; height: 100%; }
	.graybg .recommend { background: #fff; padding-bottom: 10px; }
	.graybg .recommend .cdtitle2 { margin: 0 10px; line-height: 40px; font-size: 18px; text-align: center; border-bottom: 1px solid #f1f1f1; }
	.frozen { padding: 30px 0; text-align: center; }
	.frozen i { display: inline-block; width: 100px; height: 100px; background:url(../assets/no.png) no-repeat; background-size: contain;  }
	.frozen p { color: #a1a1a1; margin-top: 15px; font-size: 18px; }
	.arrow-up { position: absolute; left: 15px; top: -10px; width:0;  height:0; border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid rgba(0,0,0,.75);}
	.teacherdes { position: absolute; left: 10px; right: 10px; top: 65px; padding:10px 15px; font-size: 14px; line-height: 26px; background:rgba(0,0,0,.75); color: #fff; }
	.vjs-tech { object-position:50% 0%; }
	.faceDiv {position: absolute; background: #fff; left: 0; top: -215px; right: 0; padding: 5px 0 5px 5px; box-sizing: content-box; border:1px solid #ddd;}
	.faceDiv span {float: left; height: 24px; margin: -1px 0 0 -1px; overflow: hidden; padding: 2px;text-align: center;width: 24px;
    border: 1px solid #E8E8E8; background:#FEF9E7;}
	.faceDiv img { width: 100%; height: 100%; }
	.message { position: fixed; left: 0; bottom: 0; width: 100%; border-top: 1px solid #f1f1f1; background: #fff; z-index: 100; }
	.message .inner { position: relative; margin:9px 0; padding: 0 98px 0 15px;}
	.message .btn { position: absolute; right: 110px; top: 0px; height: 32px; line-height: 32px;text-align: center;z-index: 1;}
	.message .pstxt { position: absolute; left: 10px; top: 8px; font-size: 12px; color: #999; }
	.message .txtarea { position: relative;border:1px solid #ddd; border-radius: 15px;background:#f5f5f5;}
	.message .txtarea .face { position: absolute; width:22px; height: 22px; left:10px;top:4px;background: url(../assets/images/face-mobile.png) no-repeat; background-size: contain;  }
	.message .txtarea p span{ color: #999; }
	#p_input { font-size:14px; line-height: 22px; min-height: 22px; max-height: 66px; padding: 4px 40px 4px 10px; overflow: auto;  }
	#p_input img { width: 26px; height: 26px; vertical-align: middle; position: relative; top: -2px; }
	#view { width: 100%;  background: #fff; }
	.pictxt .title { padding: 10px 19px 0; font-size: 20px; font-weight: bold; line-height: 28px; }
	.teacher { padding:10px 15px 5px; position: relative; z-index: 10; background: #fff; }
	.teacher .pic { float: left; width:40px; height: 40px; border: 1px solid #ccc; border-radius: 50%;  }
	.teacher .pic img { width: 100%; height: 100%; border-radius: 50%; }
	.teacher .des { padding-left: 50px; min-height: 40px; }
	.teacher .des h4 { padding: 3px 0 0; margin-bottom: 5px; font-size: 15px; font-weight: normal; }
	.teacher .des p { font-size: 12px; color: #bbb; }
	.share { position: fixed; right: 10px; bottom: 20%; width: 40px; height: 40px; background: url(../assets/share.png) no-repeat; background-size: contain;  }
	.sharebg { position: fixed; width: 100%; height: 100%; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,.5); z-index: 1000; }
	.sharebg i { position: absolute; top: 10px; right: 30px; width: 208px; height: 158px; background:  url(../assets/share2.png) no-repeat; background-size: contain;  }
	.zan { position: absolute;right: 10px;top: 2px;}
	.zan i { display: inline-block; width: 25px; height: 25px; margin-right: 5px; background: url(../assets/images/zan.png) no-repeat; background-size: contain; vertical-align: top;}
	.zan.s2 i{background: url(../assets/images/zan-active.png) no-repeat; background-size: contain; }
	.zan.s2 { color: #dd6969 }
	.pictxt .parm { font-size: 16px; color: #666; padding: 0 19px; line-height: 1.5; }
	.pictxt .parm img { max-width: 100%; }
	.pictxt .biaoqian {margin: 0 10px 10px;}
	.pictxt .biaoqian span { display: inline-block; padding: 0 4px; height: 22px; line-height: 23px; margin-right: 5px; background:#f2f2f2; border-radius: 5px; color: #353053; font-size: 13px; text-align: center}
	.recommend .cdtitle { height: 38px; line-height: 38px; margin-top: 20px; color: #424242; padding: 0 10px; font-size: 17px; background: #f1f1f1; }
	.recommend li { margin: 0 10px; padding: 10px 0; border-bottom:1px solid #f1f1f1; }
	.recommend li:last-child { border-bottom: 0 none; }
	.recommend li a { text-decoration: none; color: #333; }
	.recommend li .pic { float: left; width: 110px; height: 68px; border-radius: 4px; }
	.recommend li .des { padding-left: 120px; min-height: 65px; }
	.recommend li .des h4 { font-size: 16px; height: 18px; overflow: hidden; white-space: nowrap;text-overflow: ellipsis; color: #222; font-weight: normal; }
	.recommend li .des .time { margin:5px 0; font-size: 12px; color: #bbb; }
	.recommend li .des .time span { margin-right:10px; }
	.recommend li .des .time i { display: inline-block; vertical-align:middle; position:relative; top: -1px; margin-right: 4px; width:12px; height: 10px; background: url(../assets/pc.png) no-repeat; background-size: contain;  }
	.recommend li .des .time .i1 { background: url(../assets/vd.png) no-repeat; background-size: contain;  }
	.recommend li .biaoqian span { display: inline-block; font-size: 12px; height: 18px; padding: 0 3px; margin-right: 5px; line-height: 18px; background: #f2f2f2; border-radius: 5px; color: #353053;}
	.comment { padding-bottom: 50px; }
	.comment .title { height: 38px; line-height: 38px; color: #424242; margin-top: 10px; padding: 0 10px; font-size: 17px; background: #f1f1f1; }
	.comment li { margin: 0 10px; padding: 10px 0; border-bottom:1px solid #f1f1f1; }
	.comment li .img { float: left; width: 40px; height: 40px; border-radius: 50%; border:1px solid #f1f1f1; }
	.comment li .des { padding-left: 50px; }
	.comment li h4 { font-size:13px; color: #353053; font-weight: normal;  }
	.comment li .time { font-size: 12px; margin: 5px  0; color: #bbb; }
	.comment li .pram { font-size: 14px; color: #333; }
	.comment li .pram img { width: 24px; height: 24px; vertical-align: bottom; }
	.comment .retxt { margin-top: 10px; background: #f1f1f1; padding: 5px; }
	.comment .retxt span { color: #1565d6; }
	.nocomment { font-size: 14px; padding: 10px; color: #999; }
	.video-player-box { width: 100%; margin-bottom: 5px; position: relative; overflow: hidden; }
	.video-js { width: 100%; height: 100%; }
	.video-js .vjs-big-play-button { position: absolute; left: 50%; top:50%; margin: -22px 0 0 -45px; }    
  .content-textarea{font-size: 14px;line-height: 32px;min-height: 22px;height:32px;padding: 4px 55px 4px 40px;overflow: auto;box-sizing: border-box;width: 100%;background-color:transparent;vertical-align: top;outline: 0 none; }
  .icon-collect{display: inline-block;width: 25px;height: 25px;background: url(../assets/images/collect.png) no-repeat;background-size:contain ;vertical-align: top;}
  .has-collect .icon-collect{background: url(../assets/images/collect-active.png) no-repeat;background-size:contain ;}
  .collect-wrap{position: absolute;right: 55px;top: 2px;}
  .follow-wrap{position:absolute;top:18px;right:15px;border:1px solid rgb(67,138,189);padding:3px 15px;border-radius:20px;font-size:15px;}
  .follow-wrap a{color:rgb(67,138,189);-webkit-tap-highlight-color:rgba(0,0,0,0)}
  .face-bg{position:fixed;top:0;left:0;bottom:0;right:0;background-color:transparent;z-index:9;}
  .download-app{position: fixed;right: 0;bottom: 100px;z-index: 1}
  .download-app-a{display:inline-block;width: 87px;height:39px;line-height: 39px;border-radius: 18px 0 0 18px;background-color: #367bfd;color: #fff;font-size:14px;text-align: center}
  .detail-container{line-height: 1.8;color: rgba(0,0,0,0.8);}
  .detail-container img{ max-width:100%; display:block;height:auto;margin: 7px auto;}
  .detail-container img.lazy{width:100%;height: 200px;}
	.detail-container a{color: #1478F0;}
	.detail-container p{line-height:1.8;}
	.detail-container h2{border-left: 4px solid;padding-left: 8px;line-height: 1.2;font-size: 20px;margin:10px 0;}
	.detail-container h3{font-size: 18px;font-weight: 600;margin:10px 0;line-height: 1.6;padding-bottom: 5px;border-bottom: 1px solid #e9e9e9;}
	.detail-container blockquote{background-color: #fafafa;border: 1px solid #eee;border-left-width: 8px;padding: 10px 20px;color: #333;margin-bottom: 20px;}
	.detail-container table{ word-wrap:break-word; word-break:break-all; max-width:100%; border:none; border-color:#999; }
	.detail-container .img-label{text-align:center !important;margin-bottom:5px;}
	.detail-container .editor-center{text-align:center}
  .detail-container .editor-left{text-align:left}
  .detail-container .editor-right{text-align:right}
  .detail-container .editor-justify{text-align:justify}
</style>